<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="text" id="tj"><button id="sou">搜索</button>

    <table border="1">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>职业</th>
            <th>操作</th>
        </tr>

        <tbody>
            <tr>
                <td><input type="text" value="小红" style="text-align: center; border: none; outline: none" /></td>
                <td><input type="text" value="女" style="text-align: center; border: none; outline: none" /></td>
                <td><input type="text" value="13" style="text-align: center; border: none; outline: none" /></td>
                <td><input type="text" value="医生" style="text-align: center; border: none; outline: none" /></td>
                <td><button onclick=fn(this)>删除</button></td>

            </tr>
            <tr>
                <td><input type="text" value="小花" style="text-align: center; border: none; outline: none" /></td>
                <td><input type="text" value="女" style="text-align: center; border: none; outline: none" /></td>
                <td><input type="text" value="13" style="text-align: center; border: none; outline: none" /></td>
                <td><input type="text" value="医生" style="text-align: center; border: none; outline: none" /></td>
                <td><button onclick=fn(this)>删除</button></td>

            </tr>
            <tr>
                <td><input type="text" value="小平" style="text-align: center; border: none; outline: none" /></td>
                <td><input type="text" value="女" style="text-align: center; border: none; outline: none" /></td>
                <td><input type="text" value="13" style="text-align: center; border: none; outline: none" /></td>
                <td><input type="text" value="医生" style="text-align: center; border: none; outline: none" /></td>
                <td><button onclick=fn(this)>删除</button></td>

            </tr>
        </tbody>
    </table>
    <button id="btn">添加</button>
    <script>
        btn.onclick = function () {
            var a = document.createElement('tr'),
                a1 = document.createElement('td'),
                a2 = document.createElement('td'),
                a3 = document.createElement('td'),
                a4 = document.createElement('td')
            a5 = document.createElement('td')

            a1.innerHTML = "<input type='text'>"
            a2.innerHTML = "<input type='text'>"
            a3.innerHTML = "<input type='text'>"
            a4.innerHTML = "<input type='text'>"
            a5.innerHTML = "<button onclick=fn(this)>删除</button>"

            a.appendChild(a1)
            a.appendChild(a2)
            a.appendChild(a3)
            a.appendChild(a4)
            a.appendChild(a5)
            document.getElementsByTagName('tbody')[0].appendChild(a)
        }

        function fn(obj) {
            var tbody = obj.parentNode.parentNode.parentNode
            var a = obj.parentNode.parentNode
            tbody.removeChild(obj.parentNode.parentNode)
        }


        sou.onclick = function () {
            var s = document.getElementById('tj').value.toUpperCase()
            var tr = document.getElementsByTagName("tr");
            for (var a = 0; a < tr.length; a++) {
                td = tr[a].getElementsByTagName("td")[0];
                if (td) {
                    if (td.innerHTML.toUpperCase().indexOf(s) > -1) {

                        tr[a].style.display = "";
                    } else {
                        tr[a].style.display = "none";
                    }
                }
            }
        }
    </script>
</body>

</html>